<template>
    <div class="page-container">
        <van-sticky>
            <div class="select">
                <div class="select-label" @click="categoryPickerShow = true">分类：<van-tag type="primary">{{ categoryDisplay ? categoryDisplay : '全部' }} <van-icon name="arrow-down" /></van-tag></div>
            </div>
        </van-sticky>
        <van-cell-group>
            <van-cell
                center
                v-for="(v, k) in list"
                :key="k"
                :label="v.create_time"
            >
                <template #title>
                    <van-tag>{{ v.category_name}}</van-tag>
                    {{ v.title }}
                </template>
                <template #extra>
                    <van-button class="list-right-item-1" type="info" size="small" @click="onEditClick(v.id)">编辑</van-button>
                    <van-button type="danger" size="small" @click="
                        $dialog.confirm({
                          title: '是否删除',
                          message: '确认要删除这篇文章？',
                        }).then(() => {
                            commitDelete(v.id)
                        })
                    ">删除</van-button>
                </template>
            </van-cell>
        </van-cell-group>
        <van-popup v-model="categoryPickerShow" round position="bottom">
            <van-picker
                show-toolbar
                :columns="categorys.map(v => v.name)"
                ref="categoryPicker"
                @confirm="(e) => {categoryDisplay = e; category = categorys.find(v => v.name === e).id; categoryPickerShow = false; getList()}"
            >
                <div slot="default" class="category-picker-title">
                     <div class="left">
                         <span @click="categoryPickerShow = false">取消</span>
                     </div>
                    <div class="right">
                        <span @click="categoryDisplay = ''; category = undefined; categoryPickerShow = false; getList()">清空选项</span>
                        <span @click="$refs.categoryPicker.confirm()">确认</span>
                    </div>
                </div>
            </van-picker>
        </van-popup>
    </div>
</template>

<script>
import { getBlogList, getCategoryList, deleteBlog } from '@/api/blog.js'
import { openBlogPage } from '@/utils/url'
export default {
    name: 'Blogs',
    data() {return {
        list: [],
        categorys: [],
        page: 1,
        limit: 7,
        total: 0,
        category: undefined,
        loading: false,
        longPic: {
            loading: false,
            show: false
        },

        // 页面js统一，下面是移动端的变量
        categoryPickerShow: false,
        categoryDisplay: ''

    }},
    created() {
        this.getCategoryList(() => {
            if (this.$route.query.id) {
                this.category = this.$route.query.id
            }
            this.getList()
        })
    },
    mounted() {

    },
    methods: {
        commitDelete(id) {
            this.loading = true
            deleteBlog({id: id}).then(res => {
                this.loading = false
                this.getList()
            }).catch(e => {
                this.loading = false
                this.$message.error(e.msg)
            })
        },
        onEditClick(id) {
            this.$router.push({
                path: this.screenMode === '-' ? '/blog/new' : '/wap/blog/new',
                query: {
                    id: id
                }
            })
        },
        openBlogPage(id) {
            openBlogPage(id)
        },
        onCategoryChange(e) {
            if (e == undefined) {
                window.location.hash = '/blog/blogs'
            }
            this.getList()
        },
        getList() {
            const d = {
                page: this.page,
                limit: this.limit
            }
            if (this.category > 0) {
                d.category = this.category
            }
            this.loading = true
            getBlogList(d).then(res => {
                this.loading = false
                this.list = res.data.data
                this.total = res.data.count
            }).catch(e => {
                this.loading = false
                console.error(e)
                this.$message.error(e.msg)
            })
        },
        getCategoryList(cb) {
            getCategoryList().then(res => {
                this.categorys = res.data
                cb && cb()
            }).catch(e => {
                console.error(e)
                this.$message.error(e.msg)
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page-container {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;

    .select {
        display: flex;
        flex-direction: row;
        margin: 10px 0 10px 20px;
    }
    .list-right-item-1 {
        margin-right: 10px;
    }
}
.category-picker-title {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .left, .right {
        display: flex;
        flex-direction: row;
    }
    .left {
        margin-left: 10px;
    }
    .right {
        margin-right: 10px;
        span:nth-child(1) {
            margin-right: 10px;
            color: red;
        }
        span:nth-child(2) {
            color: #29C566;
        }
    }
}
</style>
